<template>
  <div>
    <div class="content">
      <div class="header">
        <!-- 修改表单区域 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input
              v-model="formInline.user"
              placeholder="所有单耗/充值账号/卡密"
              clearable
            />
          </el-form-item>
          <el-form-item label="订单状态" style="width: 200px">
            <el-select
              v-model="formInline.status"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="formInline._create_time"
              type="datetimerange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitSee">查询</el-button>
            <el-button type="primary" plain @click="onSubmit">重置</el-button>
          </el-form-item>
        </el-form>
      </div>


       

      <div class="area">
        <!-- <div style="border-bottom: 1px solid #3333; width: 97%; margin: 0 auto">
          <div class="header-area">
            <div
              class="tab-name"
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ tabname: tabname == index }"
              @click="btnTable(index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="tab-header" style="margin-top: 20px">
          <div class="tabs">
            <el-dropdown>
              <span class="el-dropdown-link" @click="btnSee">
                <el-button type="primary" @click="addYi"
                  >添加分类</el-button
                >
              </span>
            </el-dropdown>
          </div>
          <div class="tabs">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-button type="primary">全部展开</el-button>
              </span>
            </el-dropdown>
          </div>
          <div class="tabs">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-button type="primary" plain @click="btnDetail"> 一键删除空分类</el-button>
              </span>
            </el-dropdown>
          </div>
          <div class="tabs">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-button type="danger">批量删除</el-button>
              </span>
            </el-dropdown>
          </div>
          <div class="tabs">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-button type="primary">更多操作</el-button>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :disabled="disabledShow" @click="btnistops">设置热门</el-dropdown-item>
                  <el-dropdown-item :disabled="disabledShow"  @click="btnshezhi">设置是否显示</el-dropdown-item>
                  <el-dropdown-item :disabled="disabledShow" @click="btntutu">设置图片</el-dropdown-item>
                  <el-dropdown-item :disabled="disabledShow" @click="btnBiaoti">设置标题</el-dropdown-item>
                  <el-dropdown-item :disabled="disabledShow" @click="btnColors">设置目录颜色</el-dropdown-item>
                
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>

        <div class="table-area">
          <el-table
          ref="tableRef"
              :data="dataList"
              stripe

              @expand-change="handleExpandChange" 
             
              style="width: 100%; margin-bottom: 20px"
              border
              row-key="id"
              reserve-selection

          >
            <el-table-column width="50" align="center">
              <template #default>
                <div class="drag-handle" style="cursor: pointer">
                  <el-icon :size="16">
                    <svg viewBox="0 0 24 24" width="1em" height="1em">
                      <path
                        d="M8 6h2V4H8v2zm0 4h2V8H8v2zm0 4h2v-2H8v2zm0 4h2v-2H8v2zm4-12h2V4h-2v2zm0 4h2V8h-2v2zm0 4h2v-2h-2v2zm0 4h2v-2h-2v2z"
                        fill="currentColor"
                      ></path>
                    </svg>
                  </el-icon>
                </div>
              </template>
            </el-table-column>

            <el-table-column type="expand">
              <template #default="props">
                <div>
                  <el-table :data="props.row.children" 
                  :border="childBorder"
                  :class="'child-table-' + props.row.id" 
                  @selection-change="(row) => handleChildClick2(row)"
                  >
                    <el-table-column width="50" align="center">
                      <template #default>
                        <div class="drag-handle" style="cursor: pointer">
                          <el-icon :size="16">
                            <svg viewBox="0 0 24 24" width="1em" height="1em">
                              <path
                                d="M8 6h2V4H8v2zm0 4h2V8H8v2zm0 4h2v-2H8v2zm0 4h2v-2H8v2zm4-12h2V4h-2v2zm0 4h2V8h-2v2zm0 4h2v-2h-2v2zm0 4h2v-2h-2v2z"
                                fill="currentColor"
                              ></path>
                            </svg>
                          </el-icon>
                        </div>
                      </template>
                    </el-table-column>
                    >
                    <el-table-column
                      prop="provide_type"
                      align="center"
                      label=""
                      width="50"
                      #default="scope"
                    >
                      <span>L</span>
                    </el-table-column>
                    <el-table-column type="selection" width="55" />
                    <el-table-column
                      label="分类名称"
                      prop="name"
                      #default="scope"
                    >
                      <div style="cursor: pointer">
                        <el-input v-model="scope.row.name" style="width: 300px">
                          <template #prepend>{{ scope.row.id }}</template>
                        </el-input>

                        <div
                          style="
                            color: #1890ff;
                            font-size: 12px;
                            margin-left: 12px;
                            display: inline-block;
                          "
                          @click="btnfuzhi(scope.row, props)"
                        >
                          复制链接
                        </div>
                      </div>
                    </el-table-column>
                    <el-table-column
                      prop="id"
                      align="center"
                      label="分类图片"
                      width="100"
                      #default="scope"
                    >
                      <div>
                        <img
                          v-show="scope.row.img"
                          style="
                            width: 100%;
                            cursor: pointer;
                            width: 50px;
                            height: 50px;
                          "
                          :src="scope.row.img"
                          alt=""
                          @click="openImagePreview(scope.row.img)"
                        />
                        <el-icon v-if="!scope.row.img" :size="60"
                          ><Picture
                        /></el-icon>
                      </div>
                    </el-table-column>

                    <el-table-column
                      prop="goods_name"
                      align="center"
                      label="热门推荐"
                      width="120"
                      #default="scope"
                    >
                      <el-switch  v-model="scope.row.istop" />
                    </el-table-column>
                    <el-table-column
                      prop="status"
                      align="center"
                      label="状态"
                      width="120"
                      #default="scope"
                    >
                      <el-switch v-model="scope.row.status" />
                    </el-table-column>

                    <el-table-column
                      align="center"
                      fixed="right"
                      label="操作"
                      width="260"
                    >
                      <template #default="scope">
                        <div
                          :style="
                            isMobile
                              ? 'display: flex; flex-direction: column;'
                              : ''
                          "
                        >
                        
                          <el-button
                            type="primary"
                            plain
                            size="small"
                            @click="btnEdint(scope.row)"
                            style="margin-bottom: 5px"
                            >编辑</el-button
                          >
                          <el-button
                            type="primary"
                            plain
                            size="small"
                            @click="btnEdintshang(scope.row)"
                            style="margin-bottom: 5px"
                            >编辑分类上级</el-button
                          >
                          <el-button
                            type="danger"
                            plain
                            size="small"
                            @click="handleDelete(scope.row.id)"
                            >删除</el-button
                          >
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </el-table-column>
            <el-table-column type="selection" width="55" />

            <el-table-column prop="id" label="分类名称" #default="scope">
              <div style="cursor: pointer">
                <el-input v-model="scope.row.name" style="width: 300px">
                  <template #prepend>{{ scope.row.id }}</template>
                </el-input>
                <div
                  @click="btnEdint2(scope.row)"
                  style="
                    color: #1890ff;
                    font-size: 12px;
                    margin-left: 12px;
                    display: inline-block;
                  "
                >
                  添加下级
                </div>
               
              </div>
            </el-table-column>
            <el-table-column
              prop="goods_imgs"
              align="center"
              label="商品图片"
              width="100"
              #default="scope"
            >
              <div>
                <el-upload
                  :file-list="transformFileList(scope.row.img)"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  list-type="picture-card"
                  :on-preview="handlePreview"
                  :before-remove="
                    (file) => handleBeforeRemove2(file, scope.row)
                  "
                  :on-remove="(file) => handleRemove3(file, scope.row)"
                >
            
                  <template #trigger></template>
               
                </el-upload>
               
                <div v-if="showEmptyTip(scope.row)">
                  <div
                    class="tutu"
                    @click="btnaddimg(scope.row)"
                    style="position: relative; left: 10px; top: -10px"
                  >
                    <el-icon><Plus /></el-icon>
                  </div>
                </div>
              </div>
            
              <el-image-viewer
                v-if="showViewer"
                :url-list="previewImages"
                :initial-index="previewIndex"
                @close="showViewer = false"
              />
            </el-table-column>
            <el-table-column
              prop="goods_name"
              align="center"
              label="热门推荐"
              width="120"
              #default="scope"
            >
              <el-switch @change="getIstop(scope.row)" v-model="scope.row.istop" />
            </el-table-column>
            <el-table-column
              prop="status"
              align="center"
              label="状态"
              width="120"
              #default="scope"
            >
              <el-switch  @change="getStatus(scope.row)" v-model="scope.row.status" />
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              width="260"
            >
              <template #default="scope">
                <div
                  :style="
                    isMobile ? 'display: flex; flex-direction: column;' : ''
                  "
                >
                  <el-button
                    type="primary"
                    plain
                    size="small"
                    style="margin-bottom: 5px"
                    @click="btnEdint(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="danger"
                    plain
                    size="small"
                    @click="handleDelete(scope.row.id)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>








        </div> -->

        <!-- 新增分页组件 -->
        <div style="border-bottom: 1px solid #3333; width: 97%; margin: 0 auto">
          <div class="header-area">
            <div
              class="tab-name"
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ tabname: tabname == index }"
              @click="btnTable(index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="tab-header" style="margin-top: 20px">
          <div class="tabs">
            <el-dropdown>
              <span class="el-dropdown-link" @click="btnSee">
                <el-button type="primary" @click="addYi"
                  >添加分类</el-button
                >
              </span>
            </el-dropdown>
          </div>
          <div class="tabs">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-button type="primary">全部展开</el-button>
              </span>
            </el-dropdown>
          </div>
          <div class="tabs">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-button type="primary" plain @click="btnDetail"> 一键删除空分类</el-button>
              </span>
            </el-dropdown>
          </div>
          <div class="tabs">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-button type="danger" :disabled="disabledShow" @click="btnClose">批量删除</el-button>
              </span>
            </el-dropdown>
          </div>
          <div class="tabs">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-button type="primary">更多操作</el-button>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :disabled="disabledShow" @click="btnistops">设置热门</el-dropdown-item>
                  <el-dropdown-item :disabled="disabledShow"  @click="btnshezhi">设置是否显示</el-dropdown-item>
                  <el-dropdown-item :disabled="disabledShow" @click="btntutu">设置图片</el-dropdown-item>
                  <el-dropdown-item :disabled="disabledShow" @click="btnBiaoti">设置标题</el-dropdown-item>
                  <el-dropdown-item :disabled="disabledShow" @click="btnColors">设置目录颜色</el-dropdown-item>
                  <el-dropdown-item :disabled="disabledShow" @click="btnFen">设置分类上级</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>


        
        <el-table
    ref="tableRef"
    :data="dataList"
    style="width: 100%"
    row-key="id"
    border
    @selection-change="handleSelectionChange"
    :tree-props="{children: 'children'}"
    @select="handleParentSelect"
  >
    <!-- 拖动图标列 -->
    <el-table-column width="50" align="center">
      <template #default>
        <div class="drag-handle" style="cursor: move">
          <el-icon :size="16">
            <svg viewBox="0 0 24 24" width="1em" height="1em">
              <path
                d="M8 6h2V4H8v2zm0 4h2V8H8v2zm0 4h2v-2H8v2zm0 4h2v-2H8v2zm4-12h2V4h-2v2zm0 4h2V8h-2v2zm0 4h2v-2h-2v2zm0 4h2v-2h-2v2z"
                fill="currentColor"
              />
            </svg>
          </el-icon>
        </div>
      </template>
    </el-table-column>
    
    <!-- 父级选择框列（有全选功能） -->
    <el-table-column type="selection" width="55" :reserve-selection="true" />
    
    <!-- 展开列（显示子级） -->
    <el-table-column type="expand" width="50">
      <template #default="{ row }">
        <div v-if="row.children && row.children.length > 0">
          <el-table 
            :data="row.children"
            border
            style="width: 100%"
            row-key="id"
          >
            <!-- 子级拖动图标 -->
            <el-table-column width="50" align="center">
              <template #default>
                <div class="drag-handle" style="cursor: move">
                  <el-icon :size="16">
                    <svg viewBox="0 0 24 24" width="1em" height="1em">
                      <path
                        d="M8 6h2V4H8v2zm0 4h2V8H8v2zm0 4h2v-2H8v2zm0 4h2v-2H8v2zm4-12h2V4h-2v2zm0 4h2V8h-2v2zm0 4h2v-2h-2v2zm0 4h2v-2h-2v2z"
                        fill="currentColor"
                      />
                    </svg>
                  </el-icon>
                </div>
              </template>
            </el-table-column>
            
            <!-- 子级选择框（没有全选功能） -->
            <el-table-column width="55">
              <template #default="{ row: child }">
                <el-checkbox 
                  v-model="child.checked"
                  @change="(val) => handleChildCheck(row, child, val)"
                />
              </template>
            </el-table-column>
            
            <!-- 子级内容列 -->
            <el-table-column
                      label="分类名称"
                      prop="name"
                      #default="scope"
                    >
                      <div style="cursor: pointer">
                        <el-input v-model="scope.row.name" style="width: 300px">
                          <template #prepend>{{ scope.row.id }}</template>
                        </el-input>

                        <div
                          style="
                            color: #1890ff;
                            font-size: 12px;
                            margin-left: 12px;
                            display: inline-block;
                          "
                          @click="btnfuzhi(scope.row, props)"
                        >
                          复制链接
                        </div>
                      </div>
                    </el-table-column>
                    <el-table-column
              prop="goods_imgs"
              align="center"
              label="商品图片"
              width="100"
              #default="scope"
            >
              <div>
                <el-upload
                  :file-list="transformFileList(scope.row.img)"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  list-type="picture-card"
                  :on-preview="handlePreview"
                  :before-remove="
                    (file) => handleBeforeRemove2(file, scope.row)
                  "
                  :on-remove="(file) => handleRemove3(file, scope.row)"
                >
            
                  <template #trigger></template>
               
                </el-upload>
               
                <div v-if="showEmptyTip(scope.row)">
                  <div
                    class="tutu"
                    @click="btnaddimg(scope.row)"
                    style="position: relative; left: 10px; top: -10px"
                  >
                    <el-icon><Plus /></el-icon>
                  </div>
                </div>
              </div>
            
              <el-image-viewer
                v-if="showViewer"
                :url-list="previewImages"
                :initial-index="previewIndex"
                @close="showViewer = false"
              />
            </el-table-column>

                    <el-table-column
                      prop="goods_name"
                      align="center"
                      label="热门推荐"
                      width="120"
                      #default="scope"
                    >
                    <el-switch @change="getIstop(scope.row)" v-model="scope.row.istop" />
                    </el-table-column>
                    <el-table-column
                      prop="status"
                      align="center"
                      label="状态"
                      width="120"
                      #default="scope"
                    >
                    <el-switch  @change="getStatus(scope.row)" v-model="scope.row.status" />
                    </el-table-column>

                    <el-table-column
                      align="center"
                      fixed="right"
                      label="操作"
                      width="260"
                    >
                      <template #default="scope">
                        <div
                          :style="
                            isMobile
                              ? 'display: flex; flex-direction: column;'
                              : ''
                          "
                        >
                          <!-- <el-button
                            type="primary"
                            plain
                            size="small"
                            @click="btnSee2(scope.row, 0)"
                            style="margin-bottom: 5px"
                            >目录商品</el-button
                          > -->
                          <el-button
                            type="primary"
                            plain
                            size="small"
                            @click="btnEdint(scope.row)"
                            style="margin-bottom: 5px"
                            >编辑</el-button
                          >
                          <el-button
                            type="primary"
                            plain
                            size="small"
                            @click="btnEdintshang(scope.row)"
                            style="margin-bottom: 5px"
                            >编辑分类上级</el-button
                          >
                          <el-button
                            type="danger"
                            plain
                            size="small"
                            @click="handleDelete(scope.row.id)"
                            >删除</el-button
                          >
                        </div>
                      </template>
                    </el-table-column>
          </el-table>
        </div>
      </template>
    </el-table-column>
    
    <!-- 父级内容列 -->
    <el-table-column prop="id" label="分类名称" #default="scope">
              <div style="cursor: pointer">
                <el-input v-model="scope.row.name" style="width: 300px">
                  <template #prepend>{{ scope.row.id }}</template>
                </el-input>
                <div
              
                  style="
                    color: #1890ff;
                    font-size: 12px;
                    margin-left: 12px;
                    display: inline-block;
                  "
                >
                  添加下级
                </div>
               
              </div>
            </el-table-column>
                    <el-table-column
              prop="goods_imgs"
              align="center"
              label="商品图片"
              width="100"
              #default="scope"
            >
              <div>
                <el-upload
                  :file-list="transformFileList(scope.row.img)"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  list-type="picture-card"
                  :on-preview="handlePreview"
                  :before-remove="
                    (file) => handleBeforeRemove2(file, scope.row)
                  "
                  :on-remove="(file) => handleRemove3(file, scope.row)"
                >
            
                  <template #trigger></template>
               
                </el-upload>
               
                <div v-if="showEmptyTip(scope.row)">
                  <div
                    class="tutu"
                    @click="btnaddimg(scope.row)"
                    style="position: relative; left: 10px; top: -10px"
                  >
                    <el-icon><Plus /></el-icon>
                  </div>
                </div>
              </div>
            
              <el-image-viewer
                v-if="showViewer"
                :url-list="previewImages"
                :initial-index="previewIndex"
                @close="showViewer = false"
              />
            </el-table-column>

                    <el-table-column
                      prop="goods_name"
                      align="center"
                      label="热门推荐"
                      width="120"
                      #default="scope"
                    >
                    <el-switch @change="getIstop(scope.row)" v-model="scope.row.istop" />
                    </el-table-column>
                    <el-table-column
                      prop="status"
                      align="center"
                      label="状态"
                      width="120"
                      #default="scope"
                    >
                    <el-switch  @change="getStatus(scope.row)" v-model="scope.row.status" />
                    </el-table-column>

                    <el-table-column
                      align="center"
                      fixed="right"
                      label="操作"
                      width="260"
                    >
                      <template #default="scope">
                        <div
                          :style="
                            isMobile
                              ? 'display: flex; flex-direction: column;'
                              : ''
                          "
                        >
                          <!-- <el-button
                            type="primary"
                            plain
                            size="small"
                            @click="btnSee2(scope.row, 0)"
                            style="margin-bottom: 5px"
                            >目录商品</el-button
                          > -->
                          <el-button
                            type="primary"
                            plain
                            size="small"
                            @click="btnEdint(scope.row)"
                            style="margin-bottom: 5px"
                            >编辑</el-button
                          >
                          
                          <el-button
                            type="danger"
                            plain
                            size="small"
                            @click="handleDelete(scope.row.id)"
                            >删除</el-button
                          >
                        </div>
                      </template>
                    </el-table-column>
  </el-table>
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
      </div>
    </div>
    <!-- 分类 -->
    <el-dialog
      v-model="xiajiShow"
      :show-close="false"
      draggable
      :title="titlename"
      width="56%"
    >
      <div>
        <div class="selects">
          <span>上级分类</span>
          <el-select v-model="forms.parent_id" class="selec-name">
            <el-option
              v-for="item in feileiDate"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
        <div class="selects">
          <span>分类名称</span>
          <el-input v-model="forms.name" class="selec-name" />
        </div>

        <div class="selects">
          <span>分类简介</span>
          <el-input v-model="forms.info" class="selec-name" />
        </div>
       
        <div class="selects" style="display: flex">
          <span>图片</span>
       
          <div style="margin-left: 50px;">
            <el-upload
            
            :file-list="fileList2" 
            list-type="picture-card"
            :http-request="httpRequest2"
            :on-success="handleAvatarSuccess"
           
              :on-remove="handleRemove2"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
              <!-- <div v-show="fileList2.length==0" style="position: relative;top: -20px;left: -6px;">
                <el-upload
                  v-model:file-list="fileList2"
                  class="upload-demo"
                  :http-request="httpRequest2"
              :on-success="handleAvatarSuccess"
             
                  list-type="picture"
                >
                  <div class="tutu" @click="imgsOk">
                    <el-icon><Plus /></el-icon>
                  </div>
                </el-upload>
            </div> -->
          </div>
        </div>
        <div class="selects">
          <span>是否允许显示</span>
          <el-radio-group v-model="forms.status" class="selec-name">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </div>
        <div class="selects">
          <span>是否共享给自有商品</span>
          <el-switch class="switchs" v-model="forms.pub_status" />
        </div>
        <div class="selects">
          <span>是否允许一键对接</span>
          <el-switch class="switchs" v-model="forms.join_status" />
        </div>
        <div class="selects">
          <span>热门</span>
          <el-switch class="switchs" v-model="forms.istop" />
        </div>
        
        <div class="selects">
          <span>分类类型</span>
          <el-radio-group v-model="forms.cate_type" class="selec-name">
            <el-radio :label="1">卡密兑换</el-radio>
            <el-radio :label="0">代充到账</el-radio>
          </el-radio-group>
        </div>
      
        <div class="selects">
          <span>栏目颜色</span>
          <el-color-picker
            v-model="forms.color"
            style="margin-left: 20px"
            class="selec-name"
          />
        </div>
        <div class="selects" style="position: relative;top: -35px;">
          <span>分类描述</span>
          <el-input type="textarea" style="width: 300px;position: relative;top:35px;" v-model="forms.desc" class="selec-name" />
        </div>
       
        <div class="queding" style="position: relative;top: 35px;">
          <el-button type="primary" @click="btnOk">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 图片预览对话框 -->
    <div class="image-overlay">
      <el-dialog v-model="imgShow" :show-close="false" width="36%">
        <img style="width: 100%" :src="currentImage" alt="" />
      </el-dialog>
    </div>


       <!-- 批量修改图片2 -->
       <el-dialog
      v-model="pingImgs2"
      :show-close="false"
      draggable
      title="图片"
      width="66%"
    >
      <div class="img-area">
     
        <div class="img-right">
        <div>
          <el-button type="primary" @click="imgShows = true">图片上传</el-button>
          <!-- 修改条件：当selectedIndices不为空时显示 -->
          <el-button @click="imgsOk2" v-show="selectedIndices.length > 0">使用选中图片</el-button>
        </div>
        <div class="right-img">
          <div 
            class="rightimg-wrapper" 
            v-for="(item, index) in fileLists" 
            :key="index" 
            @click="toggleSelection2(index, item.url)"
          >
            <!-- 显示顺序号（仅在选中时） -->
            <div 
              v-if="selectedIndices.some(selected => selected.index === index)" 
              class="yuan" 
              style="left:55px"
            >
              {{ selectedIndices.find(selected => selected.index === index)?.order }}
            </div>
            <img 
              :class="{ 'img-selected': selectedIndices.some(selected => selected.index === index) }" 
              :src="item.url" 
              style="height: 120px; width: 120px" 
            />
          </div>
          
  </div>

  <!-- 分页组件 -->
  <div class="pagination-container">
    <el-pagination
      style="margin-top: 30px"
      :current-page="pageImg"
      :page-size="limitImg"
      :total="total2"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handlePageSizeChangeimg"
      @current-change="handleCurrentPageChangeimg"
    />
  </div>
</div>

      </div>
    </el-dialog>

        <!-- 上传图片 -->
        <el-dialog
    v-model="imgShows"
    :show-close="false"
    draggable
    title="上传图片"
    width="30%"
  >
    <div class="img-area">
      <div>
        <div class="jibies">
          <el-form-item label="上传方式">
            <el-radio-group v-model="imgdias" style="margin-left: 12px;">
              <el-radio :label="1">本地上传</el-radio>
              <el-radio :label="2">网络上传</el-radio>
            </el-radio-group>
          </el-form-item>
        
          <!-- 本地文件上传区域 -->
          <el-form-item label="上传图片" v-show="imgdias == 1">
            <el-upload
           
              ref="uploadRef"
              v-model:file-list="localFiles"
              multiple
              :auto-upload="false"
              :limit="20"
              list-type="picture-card"
              :before-upload="beforeUpload"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
              <template #tip>
                <div class="el-upload__tip">
                  支持jpg/png文件，单张不超过5MB
                </div>
              </template>
            </el-upload>
          </el-form-item>
          
          <!-- 网络图片区域 -->
          <el-form-item label="网络图片" v-show="imgdias == 2">
            <el-input
              v-model="remoteImageUrl"
              placeholder="请输入图片URL"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </div>
      </div>
    </div>
    
    <div style="display: flex; justify-content: center; margin-top: 20px">
      <el-button 
        type="primary" 
        @click="handleConfirmUpload"
        :loading="uploading"
      >
        {{ uploading ? '上传中...' : '确认上传' }}
      </el-button>
    </div>
  </el-dialog>










     <!-- 热门 -->
     <el-dialog
      v-model="istopShow"
      :show-close="false"
      draggable
      title="批量修改商品热门"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item >
            
            
                <el-switch class="switchs" v-model="piliang.istop" />
           
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnIstop">保存</el-button>
      </div>
    </el-dialog>

    <!-- 设置 -->
    <el-dialog
      v-model="statusShow"
      :show-close="false"
      draggable
      title="批量修改商品状态"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item >
              <!-- <el-radio-group v-model="piliang.status">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">不显示</el-radio>
              </el-radio-group> -->
              <el-switch class="switchs" v-model="piliang.status" />
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnStatus">保存</el-button>
      </div>
    </el-dialog>
      <!-- 标题 -->
      <el-dialog
      v-model="biaotiShow"
      :show-close="false"
      draggable
      title="批量修改标题"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item >
              <el-radio-group v-model="biaotis.type">
                <el-radio :label="1">修改名称</el-radio>
                <el-radio :label="0">替换名称</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          
        </div>
        <el-form-item label="商品名称">
          <el-input v-model="biaotis.name" />
          </el-form-item>
          <el-form-item label="搜索替换词">
          <el-input v-model="biaotis.before" />
          </el-form-item>
          <el-form-item label="替换成">
          <el-input v-model="biaotis.render" />
          </el-form-item>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnStatus">保存</el-button>
      </div>
    </el-dialog>





     <!-- 批量修改图片2 -->
     <el-dialog
      v-model="pingImgs3"
      :show-close="false"
      draggable
      title="图片"
      width="66%"
    >
      <div class="img-area">
     
        <div class="img-right">
        <div>
          <el-button type="primary" @click="imgShows = true">图片上传</el-button>
          <!-- 修改条件：当selectedIndices不为空时显示 -->
          <el-button @click="imgsOk4" v-show="shiyongShow">使用选中图片</el-button>
        </div>
        <div class="right-img">
          <div 
            class="rightimg-wrapper" 
            v-for="(item, index) in fileLists" 
            :key="index" 
            @click="btnImgList(index, item.url)"
          >
          
            <img 
              :class="{'imgActives':imgActives == index}"
              :src="item.url" 
              style="height: 120px; width: 120px" 
            />
          </div>
          
  </div>

  <!-- 分页组件 -->
  <div class="pagination-container">
    <el-pagination
      style="margin-top: 30px"
      :current-page="pageImg"
      :page-size="limitImg"
      :total="total2"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handlePageSizeChangeimg"
      @current-change="handleCurrentPageChangeimg"
    />
  </div>
</div>

      </div>
    </el-dialog>


      <!-- 图片 -->
      <el-dialog
      v-model="tutuShow"
      :show-close="false"
      draggable
      title="批量修改图片"
      width="36%"
    >
      <div class="img-area">
        <div style="display: flex;">
   
              <!-- <div v-show="fileList2.length==0" style="position: relative;top: -20px;left: -6px;">
                <el-upload
                  v-model:file-list="fileList2"
                  class="upload-demo"
                  :http-request="httpRequest2"
              :on-success="handleAvatarSuccess"
             
                  list-type="picture"
                >
                 
                </el-upload>
            </div> -->
            <div>
               <img class="tutu" @click="btnImgShow" :src="imgListss" v-show="imgListss"></img>
            </div>
            <div class="tutu" @click="imgsOk">
                    <el-icon><Plus /></el-icon>
                  </div>
          </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnImgs">保存</el-button>
      </div>
    </el-dialog>


        <!-- 颜色 -->
        <el-dialog
      v-model="colorShow"
      :show-close="false"
      draggable
      title="批量修改目录颜色"
      width="36%"
    >
      <div class="img-area">
        <div>
          <el-color-picker
            v-model="piliang.color"
            style="margin-left: 20px"
            class="selec-name"
          />
          
        </div>
       
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnColor">保存</el-button>
      </div>
    </el-dialog>






 <!-- 批量图片变大 -->
 <el-dialog
      v-model="tupianbiandaShow"
      :show-close="false"
      draggable
      
     width="40%"
    >
      <div class="img-area">
        <img style="width: 60%;position: relative;left: 111px;" :src="imgListss" v-show="imgListss" alt="">
       
      </div>
  </el-dialog>

 <!-- 选择上级ID -->
 <el-dialog
      v-model="idShow"
      :show-close="false"
      draggable
      
     width="20%"
    >
      <div class="img-area">
        <el-select
    v-model="parent_id"
    class="m-2"
  
    style="width: 140px"
  >
    <el-option
      v-for="item in feileiDate"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  <div style="margin-left: 12px;margin-top: 12px;">
        <el-button type="primary" @click="btnfenlei">保存</el-button>
      </div>
      </div>
  </el-dialog>





 <!-- 批量选择上级ID -->
 <el-dialog
      v-model="idShow2"
      :show-close="false"
      draggable
      
     width="20%"
    >
      <div class="img-area">
        <el-select
    v-model="parent_id"
    class="m-2"
  
    style="width: 140px"
  >
    <el-option
      v-for="item in feileiDate"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  <div style="margin-left: 12px;margin-top: 12px;">
        <el-button type="primary" @click="btnfenlei2">保存</el-button>
      </div>
      </div>
  </el-dialog>

  </div>
</template>

<script lang="ts" setup>
import {
  uploads,getUploadFiles,editGoodsImgsForIds
} from "~/base/api/product/productList.ts";
import type { UploadProps } from "element-plus";
import Sortable from "sortablejs";
import Quill from "quill";
import "quill/dist/quill.snow.css"; // 引入样式
import { watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import {
  getAll,setSort,
  getParentList,
  adds,updates,
  setIstop,setCategorystatus,updateImgForIds,
  categorycolor,delEmpty,setupmulu,deletes
} from "~/base/api/product/category.ts";
import {
  Delete,
  Plus,
  ZoomIn,
  Warning,
  PictureFilled,
  ArrowDown,
  Picture,
  CopyDocument,
  Top,
  Upload,
  Download,
  Bottom,
} from "@element-plus/icons-vue";
import { reactive, ref, onMounted, nextTick } from "vue";
import axios from "axios";
import { Loading } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage, ElLoading } from "element-plus";
const selectedIndices2 = ref([]);
const xiajiShow = ref(false);
const imgdias = ref(1);
const idShow=ref(false)
const idShow2=ref(false)
const parent_id=ref("")
const fileList2 = ref<UploadUserFile[]>([

]);
const selecShow = ref(false);
const idDate=ref([
{
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
])
const tutuShow=ref(false)
const tupianbiandaShow=ref(false)
const feileiDate = ref([]);
const color=ref("")
const imgDate=ref([])
const value1 = ref(true);
const radio = ref("");
const editorContainer = ref(null);
const fileLists = ref([]);
const selectedParentIds = ref(new Set());  // 必须是 Set 对象
const selectedChildIds = ref(new Set());   // 必须是 Set 对象

const textarea2 = ref("");
const colorShow=ref(false)
const imgShow = ref(false);
const imgShows = ref(false);
const pageImg = ref(1);
const limitImg = ref(20);
const tableRef = ref<HTMLElement | null>(null);
const total2=ref(0)
// 图片预览相关状态
const previewVisible = ref(false);
const currentImage = ref("");
//标题
const biaotis=ref({
  type:"",
  name:"",
  before:"",
  render:""
})
const piliang=ref({
  istop:false,
  status:false,
  img:"",
  name:"",
  type:"",
  before:"",
  render:"",
  color:"",

})
const imgActive = ref(-1);
const tabname = ref(0);
const childBorder = ref(false);
const istopShow=ref(false)
const statusShow=ref(false)
selecShow.value = true;
const biaotiShow=ref(false)
const disabledShow=ref(true)
//打开设置标题
function btnBiaoti(){
  biaotiShow.value=true
}

//删除空分类
function btnDetail(){
  delEmpty().then((res)=>{
    if(res.code ==200){
      getSetdocking();
      
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  }).catch((err)=>{
    ElMessage.info(err);
  })
}

//修改热门
function btnistops(){
  console.log('热门')
  istopShow.value=true
  piliang.value.istop=false
}

//列表修改热门
function getIstop(e){
  console.log(e)
  let parm={
    ids:e.id,
    istop:e.istop
  }
  setIstop(parm).then((res)=>{
    if(res.code ==200){
      getSetdocking();
      istopShow.value=false
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  }).catch((err)=>{
    ElMessage.info(err);
  })
}


//保存修改颜色
function btnColor(){

if(piliang.value.color===''){
  ElMessage({
    message: "颜色不能为空",
    type: "error",
  });
  return
}
let parm={
  ids:tabslistss2.value,
  color:piliang.value.color
}
categorycolor(parm).then((res)=>{
  if(res.code ==200){
    getSetdocking();
    colorShow.value=false
    ElMessage({
      message: res.msg,
      type: "success",
    });
  }
}).catch((err)=>{
  ElMessage.info(err);
})
}

//保存修改热门
function btnIstop(){

  if(piliang.value.istop===''){
    ElMessage({
      message: "热门不能为空",
      type: "error",
    });
    return
  }
  let parm={
    ids:tabslistss2.value,
    istop:piliang.value.istop
  }
  setIstop(parm).then((res)=>{
    if(res.code ==200){
      getSetdocking();
      istopShow.value=false
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  }).catch((err)=>{
    ElMessage.info(err);
  })
}

const ids3=ref("")
//打开分类上级
function btnEdintshang(e){
  idShow.value=true
  ids3.value=e.id
}

//批量打开分类上级
function btnFen(e){
  idShow2.value=true
  
}

//保存编辑分类上级
function btnfenlei(e){
  if(parent_id.value==''){
    ElMessage({
      message: "分类不能为空",
      type: "error",
    });
    return
  }
  let parm={
    ids:ids3.value,
    parent_id:parent_id.value
  }
  setupmulu(parm).then((res)=>{
    if(res.code ==200){
      getSetdocking();
      idShow.value=false
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  }).catch((err)=>{
    ElMessage.info(err);
  })
}


//批量保存编辑分类上级
function btnfenlei2(e){
  if(parent_id.value==''){
    ElMessage({
      message: "分类不能为空",
      type: "error",
    });
    return
  }
  let parm={
    ids:tabslistss2.value,
    parent_id:parent_id.value
  }
  setupmulu(parm).then((res)=>{
    if(res.code ==200){
      getSetdocking();
      idShow.value=false
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }else{
      ElMessage({
        message: res.msg,
        type: "info",
      });
    }
  }).catch((err)=>{
    ElMessage.info(err.msg);
  })
}
//打开图片弹框
function btnColors(){
  colorShow.value=true
  color.value=''
}



//图片批量保存
function btnImgs(){
  let parm={
    ids:tabslistss2.value,
    img:imgListss.value
  }
  updateImgForIds(parm).then((res)=>{
    if(res.code ==200){
      getSetdocking();
      tutuShow.value=false
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  }).catch((err)=>{
    ElMessage.info(err);
  })
}
//图片打开
function btntutu(){
  tutuShow.value=true
  imageUrl.value=''
  fileList2.value=[]
}
//修改设置
function btnshezhi(){

  statusShow.value=true
  piliang.value.status=false
}

function getStatus(e){
  
  let parm={
    ids:e.id,
    status:e.status
  }
  setCategorystatus(parm).then((res)=>{
    if(res.code ==200){
      getSetdocking();
      statusShow.value=false
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  }).catch((err)=>{
    ElMessage.info(err);
  })
}


//子级多选


// 在组件顶层定义（不要在函数内部定义）

const selectedChildIds2=ref("")
const selectedParentIds2=ref("")
const handleChildCheck = (parent, child, checked) => {
  console.group('[Debug] handleChildCheck');
  console.log('传入参数:', { parent, child, checked });
  
  // 1. 更新状态
  child.checked = checked;
  console.log('更新后的子项:', child);

  // 2. 收集选中ID（包含父级和子级）
  const currentlySelectedIds = [];
  
  // 检查是否需要包含父级ID
  const shouldIncludeParent = parent.children.some(c => c.checked);
  
  // 添加父级ID（如果有选中的子项）
  if (shouldIncludeParent) {
    currentlySelectedIds.push(parent.id.toString());
  }
  
  // 添加选中的子级ID
  parent.children.forEach((c, index) => {
    console.log(`子项 ${index}:`, c.id, 'checked:', c.checked);
    if (c.checked) {
      currentlySelectedIds.push(c.id.toString());
    }
  });

  console.log('当前选中IDs:', currentlySelectedIds);
  if(currentlySelectedIds.length>0){
    disabledShow.value=false
  }
  selectedChildIds2.value = currentlySelectedIds.join(',');

  tabslistss2.value=selectedChildIds2.value
  // 4. 查看完整数据
  console.log('最终状态:', {
    childIds: selectedChildIds2.value,  // 现在包含父+子
    parentIds: selectedParentIds2.value,
    allIds: tabslistss2.value
  });
  console.groupEnd();
};







//保存修改状态
function btnStatus(){

  let parm={
    ids:tabslistss2.value,
    status:piliang.value.status
  }
  setCategorystatus(parm).then((res)=>{
    if(res.code ==200){
      getSetdocking();
      statusShow.value=false
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  }).catch((err)=>{
    ElMessage.info(err);
  })
}











//获取图片
function getimg() {
  let parm = {
    page: pageImg.value,
    limit: limitImg.value,
  };

  getUploadFiles(parm).then((res) => {
   
    fileLists.value = res.data;
    total2.value = parseInt(res.count);
    
  });
}
const imageUrl=ref("")
// 打开图片预览
const openImagePreview = (imageUrl) => {
  console.log("23232323sss", imageUrl);
  currentImage.value = imageUrl;
  imgShow.value = true;
};
//打开弹框
function addYi() {
  xiajiShow.value = true;
  clears();
  titlename.value='新增'
  getParentLists();
 
}
//清空
function clears() {
  fileList2.value=[]
  forms.value.name=''
  forms.value.info=''
  forms.value.parent_id=''
  forms.value.status=''
  forms.value.pub_status=false
  forms.value.join_status=false
  forms.value.istop=false
  forms.value.cate_type=''
  forms.value.color=''
  forms.value.desc=''
  forms.value.id=''
}
// 关闭图片预览
const closeImagePreview = () => {
  previewVisible.value = false;
};

// 更现代的复制函数（推荐）
async function btnOrdersn(orderSn) {
  try {
    // 使用现代clipboard API
    await navigator.clipboard.writeText(orderSn);

    // 显示成功提示
    if (ElNotification) {
      ElNotification({
        title: "复制成功",
        message: `已复制订单号：${orderSn}`,
        type: "success",
        duration: 1500,
      });
    } else {
      alert(`已复制：${orderSn}`);
    }
  } catch (err) {
    console.error("复制失败:", err);
    // 降级方案
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = orderSn;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();

    try {
      document.execCommand("copy");
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (fallbackErr) {
      console.error("降级复制失败:", fallbackErr);
    } finally {
      document.body.removeChild(tempTextarea);
    }
  }
}

const listimgs = ref(""); 
const options = ref([
  {
    value: "1",
    label: "存在",
  },
  {
    value: "0",
    label: "不存在",
  },
]);
const options2 = ref([
  {
    value: "1",
    label: "卡密",
  },
  {
    value: "2",
    label: "手工",
  },
]);
const tuijian = ref([
  {
    value: "1",
    label: "是",
  },
  {
    value: "2",
    label: "否",
  },
]);
const xianshi = ref([
  {
    value: "1",
    label: "显示",
  },
  {
    value: "0",
    label: "隐藏",
  },
]);
const titlename = ref("添加");
const forms = ref({
  parent_id:"",
  name:"",
  info:"",
  img:"",
  status:"",
  pub_status:false,
  join_status:false,
  istop:false,
  cate_type:"",
  color:"",
  id:"",
  desc:""
});
const form = ref({
  selectedValue: "",
  show_now_status_btn: {},
  start_progres: {},
  input_list: {},
});
const imgActives=ref(-1)
const treeRef = ref("");
const filterText = ref("");
const activeName = ref("first");
watch(filterText, (val) => {
  treeRef.value!.filter(val);
});
const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.label.includes(value);
};
const dataList = ref([]);
// 添加响应式检测
const isMobile = ref(false);

const usernametitle = ref("");
const channelTreeData = ref([]); // 渠道树形结构数据
const currentPage = ref(1); // 当前页码
const pageSize = ref(30); // 每页显示数量
const total = ref(0); // 总记录数
const keyword = ref("");

const shoppingimg = ref(false);
const shoppingVdieo = ref(false);

const formInline = reactive({
  status: "",
  _create_time: "",
  uid: "",
  total_price: "",
  purchase_price: "",
  goods_name: "",
});
function handleIpClick(ip) {
  const url = `https://www.ip138.com/iplookup.php?ip=${encodeURIComponent(ip)}`;
  window.open(url, "_blank"); // 打开新标签页
}

const fileListImg=ref([
  {
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  }
])



const httpRequest = async (options) => {
  try {
    const formData = new FormData();
    formData.append('file', options.file);

    console.log('测试',options.file,formData)
    
    // 调用你的API接口
    const res = await uploads(formData);
    console.log('这个图片是什么',res.data.data.url)
    return
    fileListImg.value.push({url:res.data.data.url})
    imageUrl.value=res.data.data.url
    ElMessage({
        message: res.msg,
        type: "success",
      });
    if (res.code === 200) {
      options.onSuccess(res.data); // 必须调用以更新文件列表状态
      return res;
      
    } else {
      options.onError(new Error(res.message));
    }
  } catch (err) {
    options.onError(err);
  }
};

const httpRequest2 = async (options) => {
  try {
    const formData = new FormData();
    formData.append('file', options.file);
    
    // 调用你的API接口
    const res = await uploads(formData);
    console.log('这个图片是什么',res.data.data.url)
    imageUrl.value=res.data.data.url
    forms.value.img=res.data.data.url
    fileList2.value=[
      {
        name:'',
        url:res.data.data.url
      }
    ]
    console.log('fileList2.value',fileList2.value)
    return
    if (res.code === 200) {
      options.onSuccess(res.data); // 必须调用以更新文件列表状态
      return res;
    } else {
      options.onError(new Error(res.message));
    }
  } catch (err) {
    options.onError(err);
  }
};





//获取一级分类
function getParentLists() {
  getParentList().then((res) => {
    console.log("获取一级分类", res);
    feileiDate.value = res.data;
  });
}
// 添加下级
function btnEdint2(e, c) {
  getParentLists();
  console.log("获取一级分类", e);
  xiajiShow.value = true;
  forms.value.parent_id = e;
}
// 添加下级
function btnEdint3() {
  getParentLists();
  xiajiShow.value = true;
}

function convertImageStrings(imageString) {
  // 1. 提取字符串中的URL内容（去除头部和尾部的引号、换行符）
  const startIndex = imageString.indexOf('"');
  const endIndex = imageString.lastIndexOf('"');

  // 2. 处理带引号和不带引号的字符串
  const urlsText =
    startIndex !== -1 && endIndex !== -1
      ? imageString.slice(startIndex + 1, endIndex)
      : imageString.trim();

  // 3. 分割多个URL
  const urlArray = urlsText.split(",");

  // 4. 转换格式
  return urlArray
    .map((url) => url.trim()) // 去除空格
    .filter((url) => url !== "") // 过滤空字符串
    .map((url) => ({ url })); // 格式化为对象
}

const testString1 = ref();

//编辑
function btnEdint(e) {
  console.log('e',e)
  fileList2.value=[
      {
        name:'',
        url:e.img
      }
    ]
  titlename.value='编辑'
  xiajiShow.value = true;
  forms.value=e
  console.log("内容", forms.value);
  if(forms.value.status == true){
      forms.value.status=1
  }else if(forms.value.status == false){
    forms.value.status=0
  }
  if(forms.value.cate_type == true){
      forms.value.cate_type=1
  }else if(forms.value.cate_type == false){
    forms.value.cate_type=0
  }
}
//点击商品图片
function btnimg() {
  shoppingimg.value = true;
}
const expandedRows = ref([]); // 用于记录当前展开的行
const subTableData=ref([])
function handleExpandChange(row, expandedRows) {
  if(expandedRows.includes(row)) {
    subTableData.value = row.children;
  }
}

function initChildSortable(parentRow) {
  // 根据父行找到子级表格的容器
  // 注意：我们无法直接通过ref获取，所以使用class选择器
  // 我们在expand的template中给子级表格添加一个class，如 :class="'child-table-' + parentRow.id"
  // 但是注意，我们的expand区域可能被多次渲染，所以我们需要用parentRow.id来区分

  // 注意：由于expand区域是动态生成的，所以我们需要确保在nextTick中执行

  // 查找子级表格的tbody
  const childTableWrapper = document.querySelector(`.child-table-${parentRow.id} .el-table__body-wrapper tbody`);
  if (childTableWrapper) {
    // 如果已经初始化过，先销毁之前的实例，避免重复初始化
    if (parentRow.childSortable) {
      parentRow.childSortable.destroy();
    }

    // 初始化Sortable
    const childSortable = new Sortable(childTableWrapper, {
      animation: 150,
      handle: ".drag-handle",
      ghostClass: "sortable-ghost",
      chosenClass: "sortable-chosen",
      dragClass: "sortable-drag",
      onEnd: (evt) => {
        // 处理子级拖拽结束事件
        const oldIndex = evt.oldIndex;
        const newIndex = evt.newIndex;
        const children = parentRow.children; // 父行的children数组
        const movedItem = children.splice(oldIndex, 1)[0];
        children.splice(newIndex, 0, movedItem);

        // 更新子级顺序后，可能需要保存到后端
        // 我们可以调用一个保存顺序的方法，比如保存该父级下所有子级的顺序
        saveChildOrder(parentRow.id, children);
      },
    });

    // 将childSortable实例挂载到parentRow上，以便后续销毁
    parentRow.childSortable = childSortable;
  }
}
function saveChildOrder(parentId, children) {
  console.log(`父级ID: ${parentId} 的子级顺序已更新`, children);
  // 这里可以调用API保存顺序，将children的id按顺序发送给后端
  const newOrderIds = children.map(child => child.id);
  console.log('新的顺序ID数组:', newOrderIds);
  setSort({ nowPageSortIds: newOrderIds.join(',') }).then((res) => {
            if (res.code == 200) {
              getSetdocking();
            }
          });
  // 假设有一个API可以保存子级顺序
  // setChildSort({ parentId, sortIds: newOrderIds }).then(...)
}

//批量操作
function btnClose(){
  ElMessageBox.confirm("确定要删除这条数据吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 这里调用删除API
      deletes({ ids: tabslistss2.value }).then(() => {
        ElMessage.success("删除成功");
        //fetchData(); // 刷新列表
        getSetdocking();
      });
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
}



//分类新增
function btnOk() {
  if(forms.value.id){
    updates(forms.value).then((res)=>{
      if (res.code == 200) {
      xiajiShow.value = false;
      getSetdocking();
      ElMessage({
        message: "操作成功",
        type: "success",
      });
    }
    }).catch((err)=>{
    ElMessage.error(err.msg)
  })
  }else{
    adds(forms.value).then((res) => {
    console.log("确定的结果", res);
    if (res.code == 200) {
      xiajiShow.value = false;
      getSetdocking();
      ElMessage({
        message: "操作成功",
        type: "success",
      });
    }
  }).catch((err)=>{
    ElMessage.error(err.msg)
  })
  }

}
const shiyongShow=ref(false)
const imgLists=ref("")
const imgListss=ref("")
//点击批量图片选择
function btnImgList(index,e){
  console.log('eeeeeeeee',e)
  imgLists.value=e
  imgActives.value=index
  shiyongShow.value=true
}
//确认批量图片
function imgsOk4(){
  console.log('没有走这里')
  imgListss.value=imgLists.value
  shiyongShow.value=false
  pingImgs3.value=false
 
}



//点击电锯切换
function btnTable(e) {
  tabname.value = e;
}
function handleUpdateNode({ id, property, value }) {
  // 更新树数据中对应节点的属性
  const updateNode = (nodes) => {
    return nodes.map((node) => {
      if (node.id === id) {
        return { ...node, [property]: value };
      }
      if (node.list) {
        return { ...node, list: updateNode(node.list) };
      }
      return node;
    });
  };
  channelTreeData.value = updateNode(channelTreeData.value);
}
const openGoodsDetail = (id) => {
  // 编码特殊字符（如果id包含特殊字符）
  const encodedId = encodeURIComponent(id);
  const url = `https://demo.kasushou.com/goods?id=${encodedId}`;

  // 尝试打开新窗口
  const newWindow = window.open(url, "_blank", "noopener,noreferrer");

  if (!newWindow) {
    // 优雅处理被拦截的情况
    const confirmed = confirm("弹出窗口被阻止，是否允许此操作？");
    if (confirmed) {
      window.location.href = url; // 当前窗口跳转
    }
  }
};
const tabslistss2 = ref("");
const tabslists =ref("")
const chaildDate=ref([])
//点击子数据
function handleChildClick2(childRow: any) {
  console.log('点击的子级数据:', childRow, childRow.length);
  
  chaildDate.value = [];
  
  if(childRow.length > 0) {
    disabledShow.value = false;
    childRow.forEach(item => {
      chaildDate.value.push(item.id);
    });
    tabslistss2.value = chaildDate.value.join(',');
  } else {
    disabledShow.value = true;
    tabslistss2.value = "";
  }
}

function btnImgShow(){
  tupianbiandaShow.value=true
}


const handleSelectionChange = (selection: any[]) => {
  // 1. 更新所有选中行的ID集合（包括父级和子级）
  const allSelectedIds = new Set<string>();

  // 处理父级选择
  dataList.value.forEach(parent => {
    const isParentSelected = selection.includes(parent);
    
    // 更新父级选中状态
    if (isParentSelected) {
      allSelectedIds.add(parent.id.toString());
    }

    // 同步更新所有子级的选中状态
    if (parent.children && parent.children.length > 0) {
      parent.children.forEach(child => {
        child.checked = isParentSelected; // 强制子级与父级同步
        if (child.checked) {
          allSelectedIds.add(child.id.toString());
        }
      });
    }
  });

  // 转换为逗号分隔的字符串
  tabslistss2.value = Array.from(allSelectedIds).join(',');
  console.log('获取选中状态',tabslistss2.value)
  disabledShow.value = allSelectedIds.size === 0;
};
 









//上传图片处理
// 新增/修改的响应式数据
const pendingFiles = ref([])  // 待上传文件列表

const uploadRef = ref(null)    // 上传组件引用
const remoteImageUrl = ref('') // 网络图片URL

// 文件变化处理
const handleFileChange = (file, fileList) => {
  // 验证文件类型和大小
  const isImage = ['image/jpeg', 'image/png'].includes(file.raw.type)
  const isLt5M = file.raw.size / 1024 / 1024 < 5
  
  if (!isImage) {
    ElMessage.error('只能上传JPG/PNG格式的图片!')
    return false
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过5MB!')
    return false
  }
  
  pendingFiles.value = fileList
  return true
}



// URL验证函数
const isValidUrl = (url) => {
  try {
    new URL(url)
    return /\.(jpg|jpeg|png|webp)$/i.test(url)
  } catch {
    return false
  }
}



const localFiles = ref([])

const uploading = ref(false)
// 上传前验证
const beforeUpload = (file) => {
  const isImage = ['image/jpeg', 'image/png'].includes(file.type)
  const isLt5M = file.size / 1024 / 1024 < 5
  
  if (!isImage) {
    ElMessage.error('只能上传JPG/PNG格式的图片!')
    return false
  }
  
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过5MB!')
    return false
  }
  
  return true
}
// 图片预览
const handlePictureCardPreview = (file) => {
  // 实现图片预览逻辑
}

// 确认上传处理
const handleConfirmUpload = async () => {
  if (imgdias.value === 1) {
    // 本地上传模式
    if (localFiles.value.length === 0) {
      ElMessage.warning('请先选择要上传的图片')
      return
    }
    
    uploading.value = true
    
    try {
      const successFiles = []
      const failedFiles = []
      
      // 遍历所有待上传文件
      for (const file of localFiles.value) {
        try {
          const formData = new FormData()
          formData.append('file', file.raw)
          
          // 调用上传API
          const res = await uploads(formData)
          if (res.code === 200) {
            successFiles.push({
              name: file.name,
              url: res.data.url // 根据你的API返回结构调整
            })
          } else {
            failedFiles.push(file.name)
          }
        } catch (error) {
          failedFiles.push(file.name)
          console.error('上传失败:', file.name, error)
        }
      }
      
      // 处理结果
      if (successFiles.length > 0) {
        ElMessage.success(`成功上传 ${successFiles.length} 张图片`)
        // 这里可以处理成功上传后的逻辑，比如更新图片列表等
      }
      
      if (failedFiles.length > 0) {
        ElMessage.error(`${failedFiles.length} 张图片上传失败: ${failedFiles.join(', ')}`)
      }
      
      // 清空待上传列表
      localFiles.value = []
      imgShows.value = false
      
    } finally {
      uploading.value = false
    }
    
  } else {
    // 网络图片模式
    if (!remoteImageUrl.value.trim()) {
      ElMessage.warning('请输入有效的图片URL')
      return
    }
    
    try {
      // 处理网络图片上传逻辑
      // 这里可以添加网络图片的处理代码
      ElMessage.success('网络图片处理成功')
      remoteImageUrl.value = ''
      imgShows.value = false
    } catch (error) {
      ElMessage.error('处理网络图片失败')
    }
  }
}








// 删除方法
const handleDelete = (id: string) => {
  ElMessageBox.confirm("确定要删除这条数据吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 这里调用删除API
      deletes({ ids: id }).then(() => {
        ElMessage.success("删除成功");
        //fetchData(); // 刷新列表
        getSetdocking();
      });
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

const submit = () => {
  AddDock(addform).then(() => {
    dialogVisible.value = false;
    handleQuery(); // 提交后刷新列表
  });
};
// 查询处理
const handleQuery = () => {
  currentPage.value = 1; // 重置为第一页
  getSetdocking();
};

const imgsOk2 = async () => {
  if (selectedIndices.value.length === 0) {
    ElMessage.warning("请至少选择一张图片");
    return;
  }

  const targetId = lieimg.value || tabslistss2.value;
  let parm={
    ids:lieimg.value,
    img:imgListtus.value
  }
  updateImgForIds(parm).then((res)=>{
    if(res.code ==200){
      getSetdocking();
      tutuShow.value=false
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  }).catch((err)=>{
    ElMessage.info(err);
  })
  // if (!targetId) {
  //   ElMessage.error("必须指定目标商品");
  //   return;
  // }
  pingImgs2.value=false
  // 查找目标商品索引
  const targetIndex = dataList.value.findIndex(
    item => String(item.goods_attment_face_id) === String(targetId) || 
           String(item.id) === String(targetId)
  );



  try {
    // 获取选中的多张图片 URL（按选择顺序）
    const newImageUrls = selectedIndices.value
      .sort((a, b) => a.order - b.order) // 按顺序号排序
      .map(item => item.url);


    dataList.value[targetIndex] = {
      ...dataList.value[targetIndex],
      goods_attment_face_id: newImageUrls[0],
      img: newImageUrls.join(",")
    };

    ElMessage.success("图片批量替换成功");
  } catch (err) {
    console.error("替换失败:", err);
    ElMessage.error("图片替换失败");
  } finally {
    // 重置状态
    selectedIndices.value = [];
    lieimg.value = "";
    tabslistss2.value = "";
  }
};

//批量选择
const imgsOk3 = async () => {

  const targetId = lieimg.value || tabslistss2.value;
  // if (!targetId) {
  //   ElMessage.error("必须指定目标商品");
  //   return;
  // }
  pingImgs2.value=false
  // 查找目标商品索引
  const targetIndex = dataList.value.findIndex(
    item => String(item.goods_attment_face_id) === String(targetId) || 
           String(item.id) === String(targetId)
  );


  try {
    // 获取选中的多张图片 URL（按选择顺序）
    const newImageUrls = selectedIndices.value
      .sort((a, b) => a.order - b.order) // 按顺序号排序
      .map(item => item.url);


    dataList.value[targetIndex] = {
      ...dataList.value[targetIndex],
      goods_attment_face_id: newImageUrls[0],
      img: newImageUrls.join(",")
    };

    ElMessage.success("图片批量替换成功");
  } catch (err) {
    console.error("替换失败:", err);
    ElMessage.error("图片替换失败");
  } finally {
    // 重置状态
    selectedIndices.value = [];
    lieimg.value = "";
    tabslistss2.value = "";
  }
};


//初始化
onMounted(() => {
  getParentLists();
  getimg()


  getSetdocking();
  nextTick(() => {
    initSortableTable();
  });
  // 初始化拖拽功能
  function initSortableTable() {
    if (!tableRef.value) return;

    const tbody = tableRef.value.$el.querySelector(
      ".el-table__body-wrapper tbody"
    );

    if (tbody) {
      Sortable.create(tbody, {
        animation: 150, // 动画速度
        handle: ".drag-handle", // 只能用指定的手柄拖动
        ghostClass: "sortable-ghost", // 拖拽时的虚影样式
        chosenClass: "sortable-chosen", // 被选中的样式
        dragClass: "sortable-drag", // 拖拽中的样式
        onEnd: (evt: any) => {
          // 拖拽结束时更新数据顺序
          const oldIndex = evt.oldIndex;
          const newIndex = evt.newIndex;
          const targetRow = dataList.value.splice(oldIndex, 1)[0];
          dataList.value.splice(newIndex, 0, targetRow);
          console.log("拖拽后的数据顺序:", dataList.value);
          let cc = [];
          const ids2 = ref("");
          for (let item of dataList.value) {
            cc.push(item.id);
          }
          ids2.value = cc.join(",");

          console.log(cc, cc.join(","));
          setSort({ nowPageSortIds: ids2.value }).then((res) => {
            if (res.code == 200) {
              getSetdocking();
            }
          });
          // 调用API保存新顺序 (可选)
          // saveNewOrder(dataList.value)
        },
      });
    }
  }
});
//查询
function submitSee() {
  console.log("erer");
  getSetdocking();
}
function handlePageSizeChange(e) {
  pageSize.value = e;
  getSetdocking();
}
function handleCurrentPageChange(e) {
  currentPage.value = e;
  getSetdocking();
}
//图片删除
function btnDetai(e) {
  imgsList.value.splice(e, 1);
}
//复制链接

async function btnfuzhi(e, c) {
  let orderSn = `http://ceshi2.666dian.cn/goodscate/${c.row.id}/cid/${e.id}.html`;
  try {
    // 使用现代clipboard API
    await navigator.clipboard.writeText(orderSn);

    // 显示成功提示
    if (ElNotification) {
      ElNotification({
        title: "复制成功",
        message: `已复制订单号：${orderSn}`,
        type: "success",
        duration: 1500,
      });
    } else {
      alert(`已复制：${orderSn}`);
    }
  } catch (err) {
    console.error("复制失败:", err);
    // 降级方案
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = orderSn;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();

    try {
      document.execCommand("copy");
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (fallbackErr) {
      console.error("降级复制失败:", fallbackErr);
    } finally {
      document.body.removeChild(tempTextarea);
    }
  }
}


//图片分页
function handlePageSizeChangeimg(e) {
  selectedIndices.value = [];
  selectedIndices2.value = [];
  limitImg.value = e;
  getimg();
}
function handleCurrentPageChangeimg(e) {
  selectedIndices.value = [];
  selectedIndices2.value = [];
  pageImg.value = e;
  getimg();
}


//图片处理
const transformFileList = (imgStr) => {
  if (!imgStr || imgStr.trim() === "") return [];
  return imgStr
    .split(",")
    .slice(0, 1)
    .filter((url) => url.trim() !== "")
    .map((url) => ({
      url: url.trim(),
      name: url.split("/").pop(),
      status: "success",
    }));
};
// 检查是否显示空提示
const showEmptyTip = (row) => {
  return !row.img || transformFileList(row.img).length === 0;
};

const handlePreview = (file) => {

  currentImage.value = file.url;
  imgShow.value = true;
};
// 删除前确认
const handleBeforeRemove2 = (file, row) => {
  return ElMessageBox.confirm("确定删除这张图片吗？", "警告", {
    type: "warning",
  })
    .then(() => true)
    .catch(() => false);
};
// 实际删除处理（关键逻辑）
const handleRemove3 = async (file, row) => {
  try {
    // 1. 实际删除逻辑（API请求等）
    // await deleteImageAPI(file.url);

    // 2. 更新数据源（通过Vuex或父组件传递的方法）
    const newImgs = row.img
      .split(",")
      .filter((url) => url.trim() !== file.url)
      .join(",");

    // 这里需要根据你的数据管理方式选择：
    // 方式1: 如果scope.row是响应式对象
    row.img = newImgs;

    // 方式2: 通过emit通知父组件
    // emit('update-row', { ...row, goods_imgs: newImgs });

    ElMessage.success("删除成功");
  } catch (err) {
    ElMessage.error("删除失败");
  }
};
const lieimg = ref("");
const pingImgs2 = ref(false);
const selectedIndices = ref([]);  // 存储选中的图片信息



// 父级选择时处理
const handleParentSelect = (selection, row) => {
  // 只有当操作的是父级时才同步子级
  if (row.children) {
    const isParentSelected = selection.includes(row);
    // 只更新子级的checked状态，但不要直接修改子级的选中状态
    row.children.forEach(child => {
      child.checked = isParentSelected;
      // 更新selectedChildIds集合
      if (isParentSelected) {
        selectedChildIds.value.add(child.id);
      } else {
        selectedChildIds.value.delete(child.id);
      }
    });
  }
};































//删除图片
const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles, imgsList.value);
  imgsListId.value = [];
  imgsList.value = [];
  forms.goods_imgs = "";
  for (let item of uploadFiles) {
    console.log("dfdfdf", item.uid);
    imgsListId.value.push(item.uid);
    imgsList.value.push({ url: item.url });
  }
  console.log("imgsListId", imgsListId.value);
  forms.goods_imgs = imgsListId.value.join(",");
};
//新增页面图片删除
const handleRemove2: UploadProps["onRemove"] = (file, uploadFiles) => {
  fileList2.value=[]
  console.log("imgsListId", fileList2.value);

};



// 上传成功处理
const handleUploadSuccess = (
  response: any,
  file: UploadFile,
  fileList: UploadFiles
) => {
  console.log("上传成功:", file);
  return
  imgsList.value.push({ url: response.data.data.url });
  imgsListId.value.push(response.data.data.url);
  forms.goods_imgs = imgsListId.value.join(",");
  console.log("获取到的图片", forms.goods_imgs);
  getimg();
  // 通常后端会返回图片URL或其他标识
};
const pingImgs3=ref(false)
//图片取消弹框
function imgsOk() {
  selectedIndices.value = [];
  imgActives.value = -1;
  pingImgs3.value = true;
  shiyongShow.value=false
}


//列表打开图片
function btnaddimg(e) {
  selectedIndices.value = [];
  imgActive.value = "";
  pingImgs2.value = true;
  lieimg.value = e.id;
  listimgs.value = ""; // 重置选择
}
const imgListtu=ref([])
const imgListtus=ref("")
// 图片选中/取消逻辑
const toggleSelection2 = (index, url) => {
  imgListtu.value=[]
  const existingIndex = selectedIndices.value.findIndex(
    item => item.index === index
  );

  if (existingIndex === -1) {
    // 计算下一个顺序号
    const nextOrder = selectedIndices.value.length > 0 
      ? Math.max(...selectedIndices.value.map(item => item.order)) + 1
      : 1;
    
    selectedIndices.value.push({ 
      index, 
      url, 
      order: nextOrder 
    });
  } else {
    // 移除选中项
    selectedIndices.value.splice(existingIndex, 1);
    
    // 重新排序剩余项的顺序号
    selectedIndices.value = selectedIndices.value.map((item, i) => ({
      ...item,
      order: i + 1
    }));
  }
  console.log('这个是什么',selectedIndices.value)
  for(let item of selectedIndices.value){
      imgListtu.value.push(item.url)

  }
  imgListtus.value=imgListtu.value.join(',')

  // 更新选中的图片URL列表（逗号分隔）
  listimgs.value = selectedIndices.value
    .sort((a, b) => a.order - b.order)
    .map(item => item.url)
    .join(",");
};

function pilaing2() {
  let parm = {
    ids: tabslistss2.value,
    goodsImgs: textarea2.value,
  };
  editGoodsImgsForIds(parm).then((res) => {
    if (res.code == 200) {
      imgShows.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}

//图片确认点击
function imgShows3(){
  imgShows.value=false
  getimg()  
}





//图片上传接口
const imgsList = ref([]);
const imgsListId = ref([]);
const handleAvatarSuccess = (
  response: any,
  file: UploadFile,
  fileList: UploadFiles
) => {
  console.log("上传成功:", response.data.data);
  // imgsList.value.push({ url: response.data.data.url });
  // imgsListId.value.push(response.data.data.url);
  // forms.img = imgsListId.value.join(",");
  // console.log("获取到的图片", forms.img);
  // 通常后端会返回图片URL或其他标识
};
//列表
function getSetdocking() {
  const loadingInstance = ElLoading.service({
    target: ".el-dialog",
    lock: true,
    text: "正在加载数据中...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  
  let parm = {
    page: currentPage.value,
    limit: pageSize.value,
  };
  
  getAll(parm)
    .then((res) => {
      if (res.code == 200) {
        dataList.value = res.data.data;
        total.value = Number(res.data.total);
        for (let item of dataList.value) {
          if (item.status == 1) {
            item.status = true;
          } else {
            item.status = false;
          }
          if (item.istop == 1) {
            item.istop = true;
          } else {
            item.istop = false;
          }
        }
      }
    })
    .finally(() => {
      loadingInstance.close();  // 确保这行有分号
    });
}  // 确保函数闭合


</script>
<style>

/* ✅ 只隐藏商品列表的图片上传按钮，不影响其他弹框 */
.table-area :deep(.el-upload--picture-card) {
  display: none !important;
}

/* ✅ 修复列表位置偏移 */
.table-area :deep(.el-upload-list--picture-card .el-upload-list__item) {
  margin-left: 0 !important;
}

/* ✅ 保持弹窗上传功能不变（不添加任何会影响它的样式） */
/* 弹窗中的 el-upload 不会被影响 */





:deep(.el-cascader-menu) {
  width: 60px; /* 每列宽度 */
  margin-left: 16px !important;
}
:deep.el-divider--horizontal {
  border: none !important;
}
  /* 修正图片宽高 + 隐藏上传按钮 */
:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 60px;
  height: 60px;
  margin: 0; /* 移除默认边距 */
  margin-left: 16px !important;
}

:deep(.el-upload--picture-card) {
  display: none !important; /* 彻底隐藏上传按钮 */
}


/* 修复上传组件样式 */
:deep(.custom-uploader .el-upload--picture-card) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin-right: 10px;
}

:deep(.custom-uploader .el-upload-list--picture-card .el-upload-list__item) {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

:deep(.custom-uploader .el-upload-list--picture-card) {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* 有文件时的容器样式 */
:deep(.custom-uploader.has-files) {
  padding: 10px;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
}

/* 提示文字样式 */
.el-upload__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 7px;
  line-height: 1.5;
}

/* 鼠标悬停效果 */
:deep(.el-upload:hover) {
  border-color: #409eff;
}


:deep(.el-upload--picture-card) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  line-height: 100px;
}
:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 100px;
  height: 100px;
}




</style>
<style scoped>
/* ✅ 只隐藏商品列表的图片上传按钮，不影响其他弹框 */
.table-area :deep(.el-upload--picture-card) {
  display: none !important;
}

/* ✅ 修复列表位置偏移 */
.table-area :deep(.el-upload-list--picture-card .el-upload-list__item) {
  margin-left: 0 !important;
}

/* ✅ 保持弹窗上传功能不变（不添加任何会影响它的样式） */
/* 弹窗中的 el-upload 不会被影响 */





:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 60px;
  height: 60px;
  margin: 0; /* 移除默认边距 */
}

:deep(.el-upload--picture-card) {
  width: 60px;
  height: 60px
 
}

.kucun-footer {
  display: flex;
  margin-top: 12px;
  justify-content: center;
}
.footers-see {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
.kamiok {
  margin-top: 23px;
  display: flex;
  justify-content: center;
}
.cengben {
  margin-top: 12px;
}
.daoru {
  display: inline-block;
  position: relative;
  top: 2px;
  left: 12px;
  margin-top: 12px;
}
.selectname {
  font-size: 12px;
  color: #3333;
  margin-left: 64px;
}
.inputs {
  margin-top: 12px;
}
.activeIndex {
  background-color: #1890ff !important;
  color: white !important;
  border: 1px solid #1890ff !important;
}
.tabs-kucun {
  display: flex;
  position: relative;
  margin-left: 12px;
  top: -6px;
}
.bendi {
  border: 1px solid #3333;
  width: 80px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
}
.heng {
  width: 100%;
  height: 1px;
  background-color: #3333;
  margin-top: 16px;
}
.dingjia-type {
  margin-left: 12px;
  position: relative;
  top: 2px;
}
.price-input {
  width: 80%;
  margin-left: 12px;
}
.order-name {
  cursor: pointer;
  color: #1890ff;
}
.icon-type {
  color: #1890ff;
  position: relative;
  top: 2px;
  cursor: pointer;
}
.shop-name {
  margin-top: 20px;
}
.moban {
  color: #1890ff;
  cursor: pointer;
  font-size: 12px;
  margin-left: 12px;
}
.shop-detail {
  position: absolute;
  right: 0;
  cursor: pointer;
  right: 12px;
  color: #1890ff;
}
.guanjians {
  margin-left: 20px;
  margin-top: 20px;
  font-size: 13px;
  position: relative;
}

.guanjian {
  margin-top: 12px;
}
.shop-conten {
  width: 96%;
  margin: 0 auto;
}
.title-header {
  width: 100%;
  padding-bottom: 20px;
  background-color: #e8f4ff;
  border: 1px solid #1890ff;
}
.nameshopping {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  cursor: pointer;
}
.nameshopping:hover {
  color: #1890ff;
}


.el-table :deep(.el-upload--picture-card) {
  display: none !important;
}
/* ✅ 修复列表图片的边距 */
.el-table :deep(.el-upload-list--picture-card .el-upload-list__item) {
  margin: 0 !important;
}


.paixu {
  margin-left: 20px;
  cursor: pointer;
  color: #1890ff;
}
.order-titme {
  margin-top: 10px;
}

.iconss {
  color: #999;
  cursor: pointer;
  position: relative;
  top: 3px;
}

.iconss:hover {
  color: #1890ff;
}

.icons {
  font-size: 21px !important;
  position: relative !important;
  top: 18px !important;
  padding-right: 28px !important;
  left: 12px !important;
}

.icons2 {
  font-size: 50px !important;
  position: relative !important;
  top: 10px !important;
  padding-right: 28px !important;
  left: 12px !important;
}
.shoujia {
  color: #13ce66;

  cursor: pointer;
}
.sanfang {
  margin-left: 12px;
  font-size: 11px;
  color: #1890ff;
  cursor: pointer;
}

.orders-names {
}

.order-names {
  display: flex;
  margin-top: 15px;
}

.order-information {
}

.order-detail {
  height: 142px;
  border-bottom: 1px solid #3333;
  margin-top: 10px;
  font-size: 13px;
  padding-bottom: 14px;
}

.activeTab {
  border-bottom: 1px solid #1890ff !important;
  color: #1890ff !important;
}

.activeTabs {
  border-bottom: 1px solid #1890ff !important;
  color: #1890ff !important;
}
.ziying {
  background-color: #1890ff;
  color: white;
  width: 40px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
}
.kun-name {
  background-color: #13ce66;
  color: white;
  padding-left: 6px;
  padding-right: 6px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
}
.area-tab {
  display: flex;
  position: relative;
  left: -28px;
}
.area-tabs {
  height: 50vh;
  overflow: auto;
}
.types-name {
  background-color: #1890ff;
  width: 46px;
  color: white;
  font-size: 10px;
  margin: 0 auto;
}
.area-name {
  margin-left: 30px;
  cursor: pointer;
  height: 31px;
}

.areas-header {
  height: 32px;
  border-bottom: 1px solid #3333;
  width: 100%;
}

.bianhao {
  margin-top: 16px;
  margin-left: 3px;
  font-size: 13px;
}

.right-name {
  margin-left: 8px;
}

.areas {
  width: 98%;
  margin: 0 auto;

  margin-top: 40px;
}

.quxiao {
  /* color: white;
		background-color: rgba(0, 0, 0, .65); */
  font-size: 12px;
  margin-top: 8px;
}

.type-name {
  margin-left: 150px;
}
.numers {
  font-size: 12px;
  color: #3333;
  margin-left: 124px;
  margin-top: 5px;
}
.types {
  display: flex;
  margin-top: 30px;
  position: relative;
  left: -150px;
  font-size: 13px;
}

.imgsleft {
  width: 70px;
  height: 70px;
}

.img-left {
  width: 9%;
}

.img-content {
  margin-top: 12px;
  display: flex;
}

.contents-title {
  display: flex;
  margin-top: 14vh;
  justify-content: space-between;
}

.unbers {
  color: #1890ff;
  background-color: #e8f4ff;
  border-color: #d1e9ff;
  margin-left: 12px;
  font-size: 11px;
  height: 22px;
  width: 56px;
  text-align: center;
}

.ordername {
  color: #333;
  border: 1px solid #3333;
  border-color: #333;
  /* padding: 1px 9px 1px 9px; */
  margin-left: 12px;
  height: 22px;
  width: 56px;
  text-align: center;
  font-size: 11px;
  line-height: 22px;
}

.kami {
  color: #13ce66;
  background-color: #e7faf0;
  border-color: #d0f5e0;
  font-size: 11px;
  height: 22px;
  width: 56px;
  text-align: center;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  margin-left: 12px !important;
}
/* 确保上传按钮的样式一致 */
:deep(.el-upload--picture-card) {
  margin-left: 12px !important;
}
:deep(.el-upload-list--picture-card .el-upload-list__item) {
  margin-left: 12px !important;
}
/* 确保上传按钮的样式一致 */
:deep(.el-upload--picture-card) {
  margin-left: 12px !important;
}




a {
  text-decoration: none;
  color: inherit;
}
.queding {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  padding-bottom: 30px;
}
.imgActive {
  border: 2px solid #1890ff !important;
}
.imgActive {
  border-color: #409eff; /* 选中时高亮边框 */
}
.imgs {
  width: 70px;
  height: 70px;
  position: relative;
  top: 4px;
  border-radius: 6px;
}
.xx {
  position: absolute;
  right: -4px;
  color: red;
  top: -7px;
  cursor: pointer;
}
.table-name {
  background-color: #13ce66;
  color: white;
  width: 60px;
  margin: 0 auto;
  cursor: pointer;
  font-size: 11px;
  text-align: center;
  height: 23px;
  line-height: 23px;
}

.table-name2 {
  border-color: rgba(0, 0, 0, 0.65);
  color: white;
  padding: 3px 5px 3px 9px;
  cursor: pointer;
}

.img-arearight {
  margin-left: 26px;
}
.zanwu {
  margin-top: 30px;
  text-align: center;
}
.area-right {
  width: 90%;
  height: 53vh;
  margin-top: 20px;
  overflow: auto;
}
.right {
  flex: 1;
}
.left {
  width: 30%;
  padding-right: 20px;
}

.selects {
  margin-top: 22px;
}
.selec-name {
  width: 200px;
  margin-left: 22px;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
  text-align: center;
}
.kami-type {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
}
.zidong {
  font-size: 10px;
  text-align: center;
  color: #9999;
  position: relative;
  top: -12px;
}
.type-shop {
  width: 102px;
  height: 57px;
  border: 1px solid #3333;
  margin-left: 12px;
  border-radius: 4px;
  cursor: pointer;
}
.activeType {
  border: 1px solid #1890ff;
}
.content-type {
  display: flex;
  position: relative;
  left: -12px;
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.switchs{
  margin-left: 12px;
}
.area-footer {
  border-top: 1px solid #3333;
  height: 30px;
  margin-top: 12px;
  padding-top: 12px;
  padding-bottom: 10px;
  display: flex;
  justify-content: center;
}
.footerss {
  display: flex;
  width: 96%;
  margin: 0 auto;
  font-size: 13px;
}

.footers {
  width: 98%;
  border: 1px solid #3333;
  margin: 0 auto;
  height: 100px;
  margin-top: 25px;
}

.tabname {
  color: #409eff !important;
  border-bottom: 2px solid #409eff !important;
}

.tab-name {
  margin-left: 18px;
  cursor: pointer;
  height: 30px;
}

.header-area {
  display: flex;
  position: relative;
  left: -18px;
  top: 1px;
}
.imgActives{
  border: 2px solid #1890ff !important;
}
.names {
  background: #409eff !important;
  color: white !important;
  border: none !important;
}
.tupians {
  display: flex;
}
.imglists {
  display: flex;
  margin-left: 9px;
  position: relative;
}
.jiaoyi {
  background-color: #13ce66;
}

.header-name {
  border-radius: 20px;
  padding: 3px 16px 3px 16px;
  border: 1px solid #9999;
  margin-left: 12px;
  font-size: 13px;
  cursor: pointer;
}

.headers {
  display: flex;
  padding-bottom: 12px;
}

.m-2 {
  width: 160px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.right-img {
  display: flex;
  flex-wrap: wrap;
}
.configurations {
  margin-top: 12px;
}
.rightimg-wrapper {
  position: relative; /* 确保 yuan 绝对定位相对于此容器 */
  display: inline-block;
  margin: 24px;
  cursor: pointer;
}
.yuan {
  position: absolute;
  top: 24px;
  left: 85px;
  /* right: -49px; */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f56c6c;
  color: white;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
}
.configuration-area {
}

.dialog-footer {
  margin: 0 auto;
  margin-top: 30px;
  text-align: center;
}

.orders-name {
  margin-top: 12px;
}

.orders {
  margin-left: 12px;
}

.order-area {
  width: 98%;
  padding-bottom: 12px;
  border: 1px solid #409eff;
  background-color: #e8f4ff;
}
.kucun {
  color: #1890ff;
  cursor: pointer;
}
.tabs-area {
  margin-top: 12px;
}

.diolog-content {
}

.shu {
  width: 3px;
  height: 20px;
  background-color: #1890ff;
  position: relative;
  top: 19px;
}

.shuaxin {
  font-size: 12px;
  color: #409eff;
  padding-right: 2px;
  cursor: pointer;
}

.table-area {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
}

.tabs-price {
  border: 1px solid #3333;
  padding: 5px 12px 3px 12px;
}

.timeShow {
  color: red !important;
}

.tabs {
  margin-left: 10px;
}

.tab-header {
  display: flex;
  width: 100%;
  padding-bottom: 20px;
}

.area {
  width: 100%;
  background-color: white;
  padding-bottom: 28px;
  margin-top: 18px;
  padding-top: 14px;
}

.content {
  width: 96%;
  margin: 0 auto;
  height: 80vh;
  margin-top: 26px;
}

.header {
  background-color: white;
  padding: 17px 0 1px 12px;
  border-radius: 8px;
}

.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 基础响应式设置 */
.content {
  width: 96%;
  margin: 0 auto;
  margin-top: 26px;
  padding-bottom: 20px;
}

/* 表格区域响应式 */
.table-area {
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  overflow-x: auto;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  overflow-x: auto;
}

/* 对话框内容 */
.diolog-content {
  padding: 10px;
}

/* 标签页区域 */
.tabs-area {
  margin-top: 12px;
}

/* 配置区域 */
.configurations {
  margin-top: 12px;
}

/* 对话框底部按钮 */
.dialog-footer {
  margin: 20px auto 0;
  text-align: center;
}

/* 订单区域 */
.order-area {
  width: 100%;
  padding: 12px;
  border: 1px solid #409eff;
  background-color: #e8f4ff;
  box-sizing: border-box;
}

/* 刷新按钮样式 */
.shuaxin {
  font-size: 12px;
  color: #409eff;
  padding-right: 2px;
  cursor: pointer;
}

/* 加载动画 */
.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  /* 头部表单 */
  .header {
    padding: 10px;
  }

  /* 表单项目 */
  .el-form-item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  /* 标签页 */
  .el-tabs {
    overflow-x: auto;
  }

  /* 对话框内容 */
  .diolog-content {
    padding: 5px;
  }

  /* 输入框宽度 */
  .el-input {
    width: 100% !important;
  }

  /* 表格操作按钮 */
  .el-table-column--fixed-right .el-button {
    margin-bottom: 5px;
  }

  /* 标签页头 */
  .tab-header {
    flex-direction: column;
  }

  .tabs {
    margin: 5px 0;
  }

  /* 对话框标题 */
  .el-dialog__title {
    font-size: 16px;
  }
}

/* PC端特定样式 */
@media (min-width: 769px) {
  .content {
    /* max-width: 1200px; */
  }

  .table-area {
    width: 98%;
  }

  .diolog-content {
    min-width: 500px;
  }

  .el-form--inline .el-form-item {
    margin-right: 10px;
  }
}
.tutu {
  border: 1px solid #3333;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  margin-left: 6px;
}
/* 强制内容区域垂直排列 */
.ql-container {
  display: block !important; /* 确保容器是块级 */
}

.ql-editor {
  min-height: 100px;
}

/* 解决工具栏并列问题 */
.ql-toolbar {
  display: block; /* 转换为块级元素 */
  border-bottom: 1px solid #ccc; /* 可选分隔线 */
}

.ql-container {
  border-top: none !important;
}
.editor-wrapper {
  display: flex;
  flex-direction: column; /* 关键的垂直布局 */
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden; /* 防止内容溢出 */
}

.custom-editor {
  flex-grow: 1; /* 编辑区域填充剩余空间 */
}

.adds {
  color: #1890ff;
  font-size: 12px;
  position: relative;
  top: -10px;
  cursor: pointer;
}
.jibies {
  margin-top: 12px;
}
.avatar-uploader {
  position: relative;

  left: 10px;
  width: 80px;
  height: 80px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
.avatar-uploader:hover {
  border-color: #409eff;
  background-color: #f5f7fa;
}



@media (max-width: 768px) {
  /* 全局调整 */
  .selec-name{
    width: 60% !important;
  }
  .content {
    padding: 0 10px;
  }

  /* 表格操作按钮垂直排列 */
  .el-table__fixed-right .el-button {
    display: block;
    margin-bottom: 5px;
  }

  /* 对话框宽度 */
  .el-dialog {
    width: 95% !important;
  }
}

</style>
